Tailwind CSSのチートシート

親要素の状態に基づくスタイリング

親要素の状態に基づいて子要素をスタイリングしたいときは、親要素にgroupクラスをつけた上で、子要素にgroup-状態:任意のクラス名を指定する。

また、グループにはgroup/グループ名という形で名前をつけることができる。グループをネストする場合は、group-状態/グループ名:任意のクラス名という形にする。

親要素に指定されたセレクターに基づいて子要素をスタイリングしたいときは、group-[任意のセレクター]という形でクラスを指定する。

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

兄弟要素の状態に基づくスタイリング

兄弟要素の状態に基づいて要素をスタイリングしたいときは、兄要素にpeerクラスをつけた上で、弟要素にpeer-状態:任意のクラス名を指定する(例:peer-invalid:bg-red-500)。

また、兄弟にはpeer/兄弟名という形で名前をつけることができる。兄弟名って何だ。でもピア名とするよりはましだ。複数の兄弟たちを使いわけたいときは、peer-状態/兄弟名:任意のクラス名という形にする。

兄要素に指定されたセレクターに基づいて子要素をスタイリングしたいときは、peer-[任意のセレクター]という形で兄弟名を指定する。

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state

直下の子要素に対するスタイリング

直下の子要素のスタイルをまとめて指定したいときは、*:任意のクラス名という形を使う。これを指定すると、子要素にクラスを指定しても機能しない。注意したい。

なお、Tailwind CSSは、CSSの[継承プロパティ](

参考元:
https://web.dev/learn/css/inheritance#which_properties_are_inherited_by_default)と非継承プロパティをそのまま踏襲している(たぶん)。

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-direct-children

子孫の有無・状態に基づくスタイリング

子孫の有無に基づいて要素をスタイリングしたいときは、has-[セレクター]:任意のクラス名という形を使う。

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-descendants

グループの子孫の有無・状態に基づくスタイリング

グループに特定の子孫がいるかどうかに基づいてスタイリングしたいときは、親要素にgroup、対象の要素にgroup-has-[セレクター]:任意のクラス名を指定する。

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-the-descendants-of-a-group

兄弟要素の子孫の有無・状態に基づくスタイリング

兄弟要素の子孫の有無・状態に基づいてスタイリングしたいときは、兄要素にpeer、弟要素にpeer-has-[セレクター]:任意のクラス名を指定する。

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-the-descendants-of-a-peer

ユーザーアクション擬似クラスほか

Modifier CSS
hover &:hover
focus &:focus
focus-within &:focus-within
focus-visible &:focus-visible
active &:active
visited &:visited
target &:target

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

木構造擬似クラスほか

Tailwind CSS CSS
* & > *
has &:has
first &:first-child
last &:last-child
only &:only-child
odd &:nth-child(odd)
even &:nth-child(even)
first-of-type &:first-of-type
last-of-type &:last-of-type
only-of-type &:only-of-type
empty &:empty

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

入力擬似クラス

Tailwind CSS CSS
disabled &:disabled
enabled &:enabled
checked &:checked
indeterminate &:indeterminate
default &:default
required &:required
valid &:valid
invalid &:invalid
in-range &:in-range
out-of-range &:out-of-range
placeholder-shown &:placeholder-shown
autofill &:autofill
read-only &:read-only

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

擬似要素

Tailwind CSS CSS
before &::before
after &::after
first-letter &::first-letter
first-line &::first-line
marker &::marker
selection &::selection
file &::file-selector-button
backdrop &::backdrop
placeholder &::placeholder

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

メディアクエリ&機能クエリ

Tailwind CSS CSS
sm @media (min-width: 640px)
md @media (min-width: 768px)
lg @media (min-width: 1024px)
xl @media (min-width: 1280px)
2xl @media (min-width: 1536px)
min-[…] @media (min-width: …)
max-sm @media not all and (min-width: 640px)
max-md @media not all and (min-width: 768px)
max-lg @media not all and (min-width: 1024px)
max-xl @media not all and (min-width: 1280px)
max-2xl @media not all and (min-width: 1536px)
max-[…] @media (max-width: …)
dark @media (prefers-color-scheme: dark)
portrait @media (orientation: portrait)
landscape @media (orientation: landscape)
motion-safe @media (prefers-reduced-motion: no-preference)
motion-reduce @media (prefers-reduced-motion: reduce)
contrast-more @media (prefers-contrast: more)
contrast-less @media (prefers-contrast: less)
print @media print
supports-[…] @supports (…)

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

ARIA属性ほか

Tailwind CSS CSS
aria-checked &[aria-checked=“true”]
aria-disabled &[aria-disabled=“true”]
aria-expanded &[aria-expanded=“true”]
aria-hidden &[aria-hidden=“true”]
aria-pressed &[aria-pressed=“true”]
aria-readonly &[aria-readonly=“true”]
aria-required &[aria-required=“true”]
aria-selected &[aria-selected=“true”]
aria-[…] &[aria-…]
data-[…] &[data-…]
rtl [dir=“rtl”] &
ltr [dir=“ltr”] &
open &[open]

参考元:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

aspect ratio

Tailwind CSS CSS
aspect-auto aspect-ratio: auto;
aspect-square aspect-ratio: 1 / 1;
aspect-video aspect-ratio: 16 / 9;

参考元:
https://tailwindcss.com/docs/aspect-ratio

container

tailwind CSS CSS
container None
width: 100%;
sm(640px)
max-width: 640px;
md(768px)
max-width: 768px;
lg(1024px)
max-width: 1024px;
xl(1280px)
max-width: 1280px;
2xl(1536px)
max-width: 1536px;

参考元:
https://tailwindcss.com/docs/container

columns

tailwind CSS CSS
columns-1 columns: 1;
columns-2 columns: 2;
columns-3 columns: 3;
columns-4 columns: 4;
columns-5 columns: 5;
columns-6 columns: 6;
columns-7 columns: 7;
columns-8 columns: 8;
columns-9 columns: 9;
columns-10 columns: 10;
columns-11 columns: 11;
columns-12 columns: 12;
columns-auto columns: auto;
columns-3xs columns: 16rem; /* 256px */
columns-2xs columns: 18rem; /* 288px */
columns-xs columns: 20rem; /* 320px */
columns-sm columns: 24rem; /* 384px */
columns-md columns: 28rem; /* 448px */
columns-lg columns: 32rem; /* 512px */
columns-xl columns: 36rem; /* 576px */
columns-2xl columns: 42rem; /* 672px */
columns-3xl columns: 48rem; /* 768px */
columns-4xl columns: 56rem; /* 896px */
columns-5xl columns: 64rem; /* 1024px */
columns-6xl columns: 72rem; /* 1152px */
columns-7xl columns: 80rem; /* 1280px */

参考元:
https://tailwindcss.com/docs/columns

break after

tailwind CSS CSS
break-after-auto break-after: auto;
break-after-avoid break-after: avoid;
break-after-all break-after: all;
break-after-avoid-page break-after: avoid-page;
break-after-page break-after: page;
break-after-left break-after: left;
break-after-right break-after: right;
break-after-column break-after: column;

参考元:
https://tailwindcss.com/docs/break-after

break before

tailwind CSS CSS
break-before-auto break-before: auto;
break-before-avoid break-before: avoid;
break-before-all break-before: all;
break-before-avoid-page break-before: avoid-page;
break-before-page break-before: page;
break-before-left break-before: left;
break-before-right break-before: right;
break-before-column break-before: column;

参考元:
https://tailwindcss.com/docs/break-before

break inside

tailwind CSS CSS
break-inside-auto break-inside: auto;
break-inside-avoid break-inside: avoid;
break-inside-avoid-page break-inside: avoid-page;
break-inside-avoid-column break-inside: avoid-column;

参考元:
https://tailwindcss.com/docs/break-inside

box decoration break

tailwind CSS CSS
box-decoration-clone box-decoration-break: clone;
box-decoration-slice box-decoration-break: slice;

参考元:
https://tailwindcss.com/docs/box-decoration-break

box sizing

tailwind CSS CSS
box-border box-sizing: border-box;
box-content box-sizing: content-box;

参考元:
https://tailwindcss.com/docs/box-sizing

display

tailwind CSS CSS
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
inline-table display: inline-table;
table-caption display: table-caption;
table-cell display: table-cell;
table-column display: table-column;
table-column-group display: table-column-group;
table-footer-group display: table-footer-group;
table-header-group display: table-header-group;
table-row-group display: table-row-group;
table-row display: table-row;
flow-root display: flow-root;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;

参考元:
https://tailwindcss.com/docs/display

floats

tailwind CSS CSS
float-start float: inline-start;
float-end float: inline-end;
float-right float: right;
float-left float: left;
float-none float: none;

参考元:
https://tailwindcss.com/docs/float